<template>
  <div class="tabs-panel-component"
    v-if="(!lazy || loaded) || active"
    v-show="active"
    role="tabpanel"
    :aria-hidden="!active"
    :id="`pane-${name}`"
    :aria-labelledby="`tab-${name}`"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "tabsPanelComponent",
  props: {
    label: String,
    name: String,
    lazy: Boolean
  },
  data() {
    return {
      loaded: false
    }
  },
  computed: {
    active() {
      const active = this.$parent.currentName === this.name;
      if (active) {
        this.loaded = true;
      }
      return active;
    }
  }
}
</script>

<style>

</style>